<template>
  <div>
    <div id="div3">
      <el-table
          :data="tableData1"
          border
          style="width: 97.6%">

        <el-table-column
            label="申请用户"
            prop="name"
            width="275">
        </el-table-column>
        <el-table-column
            label="申请类型"
            prop="type"
            width="300">
          <template  #default="scope">
            {{scope.row.type == '1' ? "量血压" : scope.row.type == '2' ? "测核酸":
              scope.row.type == '3' ? "外伤处理" : scope.row.action.result == '4' ? "心理咨询" :''}}
          </template>
        </el-table-column>
        <el-table-column
            prop="time"
            label="申请医疗时间"
            width="200">
        </el-table-column>
        <el-table-column
            prop="time"
            label="医疗状态"
            width="200">
          <template  #default="scope">
            {{scope.row.state == '1' ? "等待派遣" : scope.row.state == '2' ? "正在派遣":
              scope.row.state == '3' ? "医疗完成" :''}}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="250">
          <template #default="scope">
<!--            <el-button type="primary" @click="showmedicbyid(scope.row)">查看</el-button>-->
            <el-button  type="primary" v-if="scope.row.state == '1'" @click="showmedicbyid(scope.row)">查看</el-button>
            <el-button  type="primary" v-if="scope.row.state == '2'" @click="showmedicbyid(scope.row)">查看</el-button>
            <el-button  type="primary"  v-if="scope.row.state == '3'" disabled>已完成</el-button>
            <el-button @click="detelemedic(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog v-model="orderInfo1" title="用户申请" :before-close="close1" class="dialog1">
        <p >地址:{{tableData2.place}}</p>
        <p >症状描述:{{tableData2.content}}</p>
        <p >医疗状态:
          {{tableData2.state == '1' ? "等待派遣" : tableData2.state == '2' ? "正在派遣":
             tableData2.state == '3' ? "医疗完成" :''}}
        </p>
        <el-form-item label="派遣医疗人员" class="input3">
          <el-select v-model="doc">
            <el-option label="心血管医疗队" value="1"></el-option>
            <el-option label="核酸医疗队" value="2"></el-option>
            <el-option label="外伤医疗队" value="3"></el-option>
            <el-option label="心理医疗队" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="sendmedic()">派遣</el-button>
        <el-button type="primary" @click="finishmedic()">完成医疗</el-button>
        <el-button @click="close1()">关闭</el-button>
      </el-dialog>
    </div>
  </div>
</template>

<script >
// import {Plus} from '@element-plus/icons-vue'
import request from "@/utils/request";
import {reactive} from "vue";
import {ElMessage} from "element-plus";
import sEditor from '../components/background/Editor'

export default {
  name: "publishGoods",
  data() {
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商品名称'));
      } else if (value.toString().match("[^\u4e00-\u9fa5a-zA-Z0-9]")) {
        callback(new Error('商品名称填写有误，不能包含特殊字符'));
      } else {
        callback();
      }
    };
    const validatePrice = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商品价格'));
      } else {
        if (value.toString().match("[^0-9\\.]") || value.toString().match("^\\.")) {
          callback(new Error('请输入正确的商品价格'));
        } else {
          callback();
        }
      }
    };
    const validateGoodsType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择商品类型'));
      } else {
        callback();
      }
    };
    return {
      doc:'',
      id:'',
      isButtonDisabled: true,
      tableData1: [],
      tableData2:{
        name:'',
        place:'',
        content:'',
        state:'',
      },
      orderInfo1:false,
      fileList: [],
      type: [],
      arr: [{name: '是'}, {name: '否'}],
      select: '否',
      form: {
        stock: '',
        goodsName: '',
        goodsType: '',
        goodsPrice: '',
        goodsDescription: '',
      },
      // rules: reactive({
      //   goodsName: [{required: true, validator: validateName, trigger: 'blur'},
      //     {min: 2, max: 20, message: '长度必须在2-20之内', trigger: 'blur'}],
      //   goodsPrice: [{required: true, validator: validatePrice, trigger: 'blur'}],
      //   goodsType: [{type: 'array', required: true, validator: validateGoodsType, trigger: 'change'}],
      //   goodsDescription: [{required: true, message: '商品描述不能为空', trigger: 'change'}],
      // })
    }
  },
  methods: {
    showmedic(){
      request.get("http://localhost:8082/user/showmedic").then(res =>{
        if (res.flag) {
          this.tableData1 = res.data;
          console.log("sa",this.tableData1)
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
        else {
          this.$message.error(res.msg);
        }
      })
    },
    showmedicbyid(row){
      this.orderInfo1=true;
      this.id=row.id
      request.get("http://localhost:8082/user/showmedicbyid?id="+this.id).then(res =>{
        if (res.flag) {
          this.tableData2 = res.data;
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
        else {
          this.$message.error(res.msg);
        }
      })
    },
    sendmedic(row){
      request.post("http://localhost:8081/seller/sendmedic?id="+this.id+"&doc="+this.doc).then(res =>{
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
        else {
          this.$message.error(res.msg);
        }
      })
    },

    finishmedic(row){
      request.post("http://localhost:8081/seller/finishmedic?id="+this.id).then(res =>{
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
        else {
          this.$message.error(res.msg);
        }
      })
    },

    detelemedic(row){
      request.post("http://localhost:8081/seller/detelemedic?id="+this.id).then(res =>{
        if (res.flag) {
          this.$message({
            type: 'success',
            message: res.msg
          })
        }
        else {
          this.$message.error(res.msg);
        }
      })
    },

    open1(row) {
      this.orderInfo1=true;
    },
    close1() {
      this.orderInfo1 = false;
    },
  },
  created() {
    this.showmedic()
  },
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.div {
  /*background-color: #E0EEE0;*/
}

.div1 {
  display: flex;
  text-align: center;
}

.left {
  float: left;
  width: 400px;
}

.right {
  margin-left: 420px;
}

.item {
  width: 400px;
  margin-top: 20px;
  margin-left: 10px;
}

.item2 {
  width: 600px;
  margin-top: 60px;
  margin-left: 10px;
}

.bnt {
  position: absolute;
  left: 45%;
  bottom: 10px;
}

.h1 {
  text-align: center;
  margin-top: 20px;
}
</style>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

</style>
